<!DOCTYPE html>
<html ng-app = "controllers">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/style.css">
    <script src="js/angular.js"></script>
    <script src = "js/angular-resource.js"></script>
    <script src = "js/angular-cookies.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="dist/css/bootstrap.css" rel="stylesheet" />
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="dist/css/bootstrap-theme.css" rel="stylesheet" />
    <link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="dist/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="dist/css/bootstrap-responsive.css" rel="stylesheet" />
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="js/script.js"></script>
    <script src="js/controllers.js"></script>
    <script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
    <script src="dist/js/bootstrap.js"></script>
    <title>Quirkl-Your Global TV Channel</title>
  

  </head>
  <body ng-controller="UserCtrl">
    <div class = "container-fluid full-width">
    <div class = "row-fluid">
      <nav class = "navbar navbar-default" role = "navigation">
        <div class = "navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class = "span1" ng-switch="!!auth.isLogged">
                                  <a ng-switch-when="true" class = "navbar-brand" href="index.html?;;user={{auth.user}}"><img src = "img/logors.png" alt = "idk"/></a>
                                  <a ng-switch-when="false" class = "navbar-brand" href="index.html"><img src = "img/logors.png" alt = "idk"/></a>
                  </div>
        </div>
        <div class = "collapse navbar-collapse navbar-ex1-collapse" ng-switch="!!auth.isLogged">
                        <div ng-switch-when="true">
                          <ul class = "nav navbar-nav" >
                                <li><a href="index.html?;;user={{auth.user}}">
                                        <h4>Home</h4></a></li>
                                <li><a href="#"><h4>About</h4></a></li>
                          </ul>    
            </div>
                        <div ng-switch-when="false">
                          <ul class = "nav navbar-nav" >
                                <li><a href="index.html">
                                        <h4>Home</h4></a></li>
                                <li><a href="#"><h4>About</h4></a></li>
                          </ul>    
            </div>   
          
          <div>
            <div ng-switch on = "!!auth.isLogged">
              <div ng-switch-when = 'true'>
                <ul class = "nav navbar-nav navbar-right pull-right">
                        <li><h4 style="padding: 10px; font-color: #000777">"Hi, {{auth.user}}!"</h4></li>
                  <li><a href="#"><img src = "img/mail-icon.png" alt = "who knows"></a></li>
                  <li class = "dropdown">
                    <a href="#" class = "dropdown-toggle" data-toggle = "dropdown"><img src = "img/user.png" alt = "who knows"><b class = "caret"></b></a>
                    <ul class = "dropdown-menu">
                      <li><a href="profile.html?artistID={{curUser}};;user={{auth.user}}">My Profile</a></li>
                      <li><a href="#">Settings</a></li>
                      <li><a href="#" ng-click = "logout()">Sign Out</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
              <div ng-switch-when = 'false'>
                <ul class = "nav navbar-nav navbar-right pull-right">
                  <li><a data-toggle = "modal" href = "#signUp"><h4>Sign Up</h4></a></li>
                  <li><a data-toggle = "modal" href = "#login"><h4>Log In</h4></a></li>
              </div>
            </div>
          </div>  
        </div> 
      </nav>
    </div>  
    <div class = "row-fluid">
      <div ng-controller = "CarouselCtrl">
        <div id = "carousel" class = "carousel slide">
          <ol class = "carousel-indicators">
            <li data-target="#carousel" data-slide-to="0"</li>
            <li data-target="#carousel" data-slide-to='{{$index+1}}' ng-repeat = "slide in slides"></li>
          </ol>
          <div class = "carousel-inner">
            <div class = "item active">
              <div class = 'image'>   
                <img src = "http://a248.e.akamai.net/origin-cdn.volusion.com/dgvyu.yrrvz/v/vspfiles/photos/12579-2T.jpg?1357915328" style = "display:block;margin-left:auto;margin-right:auto">
              </div>  
              <div class = "carousel-caption">
                <h3>Sunset</h3>
                <p>Colorful blocks</p>
              </div>
            </div> 
            <div class = "item" ng-repeat="slide in slides">
              <div class = "image">
                <img src = '{{slide.image}}' style = "display:block;margin-left:auto;margin-right:auto">
              </div>
              <div class = "carousel-caption">
                <h3>{{slide.name}}</h3>
                <p>{{slide.text}}</p>
              </div>
            </div>    
          </div>
          <a class="left carousel-control" href="#carousel" data-slide="prev">
          <span class="icon-prev"></span></a>
          <a class="right carousel-control" href="#carousel" data-slide="next">
          <span class="icon-next"></span>
          </a>  

          <script>

        $(document).ready(function(){
          $('.carousel').carousel({
              interval: 2000
          });
         }) 
      </script>
        </div>
      </div>  
    </div>
    
    <div class = "row-fluid" ng-controller = "ProfileCtrl" ng-init="artistNum=$scope.artistNum">
     <div class="span2">
      <div class="menu">
        <nav>  
          <ul class = "nav nav-pills nav-stacked">
            <li ng-click="displayChange('Film')"><a href="#">Film</a></li>
            <li ng-click="displayChange('Music')"><a href="#">Music</a></li>
            <li ng-click="displayChange('Performance')"><a href="#">Performance</a></li>
            <li ng-click="displayChange('Series')"><a href="#">Series</a></li>
           <li>
              <div class="panel-group" id="accordian">
                <div class = "panel panel-default">
                  <div class = "panel-heading">
                    <a class = "accordian-toggle" data-toggle="collapse" href="#collapseOne" ng-click="displayChange('visualArt')">Visual Art</a>
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse">
                    <div class="panel-body" style="padding-left: 0px; padding-top: 0px";>
                      <ul class = "list-unstyled">
                        <li ng-click="displayChange('painting')"><a href="#">Paintings</a></li>
                        <li ng-click="displayChange('photography')"><a href="#">Photography</a></li>
                        <li ng-click="displayChange('sculpture')"><a href="#">Sculptures</a></li>
                      </ul>  
                    </div>
                  </div> 
                </div>
               </div>
            </li>
          </ul>  
        </nav>
       </div>
     </div>
       <div class="art span10">
        <div class = "span6">
          Sort by 
          <select ng-model='sort' style="width: 150px">
            <option value = "title">Name</option>
            <option value = "days">Newest</option>
            <option value = "rating">Popular</option>
            <option value = "View">Most Viewed</option>
          </select>
           in 
          <select ng-model = 'ascend' style="width: 150px">
            <option value = true>Descending</option>
            <option value = false>Ascending</option>
          </select>
          order
         </div>
         <div class = "span4">
          <input type="text"  class = "search-query" placeholder = "Search" ng-model="search" ng-maxlength: "15">
         </div>


         <div class = "span10">
          <ul class = "thumbnails">
            <li class = "span2" ng-repeat = "art in artwork | orderBy: sort:ascend| filter:search" ng-switch="loggedIn">
              <a ng-switch-when="true" href="Art Page.html?artID={{art.artID}};category={{art.category}};user={{curUser}}" class = "thumbnail">
                <img id="thumbnailPics" src = "{{art.thumbnail}}">
              </a>
                          <a ng-switch-when="false" href="Art Page.html?artID={{art.artID}};category={{art.category}}" class = "thumbnail">
                <img id="thumbnailPics" src = "{{art.thumbnail}}">
              </a>
              <p>{{art.title}}</p>
            </li>
          </ul>      
         </div>
      </div>   
    </div> 
  </div>
  <div>  
    <div class = "modal fade" id = "signUp" tabindex = "-1" role = "dialog" aria-labelledby="signUpLabel" aria-hidden="true">
      <div class = "modal-dialog">
        <div class = "modal-content">
          <div class = "modal-header">
            <h4 class = "modal-title" id="signUplabel">Sign Up</h4>
          </div>
          <div class = "modal-body">
             <form ng-controller = 'SignUpFormCtrl' ng-submit = "processForm()">
                <label for="username">Username:</label>
                <input type = "text"  name = "username" ng-model = "user.username" required><br/>
                <label for = "name">Name:</label>
                <input type = "text" name = "name" ng-model = "user.name" required><br/>
                <label for = "password">Password:</label>
                <input type = "password" name = "password" ng-model = "user.password" required><br/>
                <button type = "submit" class = "btn btn-success">Submit</button>
                <button type = "button" class = "btn btn-danger" data-dismiss = "modal">Close</button>
              </form>
          </div>
        </div>
      </div>
    </div> 
    <div class = "modal fade" id = "login" tabindex = "-1" role = "dialog" aria-labelledby="loginLabel" aria-hidden="true">

      <div class = "modal-dialog">
        <div class = "modal-content">
          <div class = "modal-header">
            <h4 class = "modal-title" id="loginlabel">Log In</h4>
          </div>
          <div class = "modal-body">
             <form ng-submit = "logon()">
                <label for = "username">Username:</label>
                <input type = "text" ng-model = "logged.username"  required><br/>
                <label for = "password">Password:</label>
                <input type = "password" name = "logged.password" required><br/>
                <button type = "button" class = "btn btn-success" type = "submit" data-dismiss = "modal">Submit</button>
                <button type = "submit" class = "btn btn-danger" data-dismiss = "modal">Cancel</button>
              </form>
          </div>
        </div>
      </div>
    </div>
  </div>  
</body>
</html>